<template>
  <div>
    <el-dialog :title="operatorType == 2 ? '批量设置延迟通知时间' : '编辑延迟通知时间'" :visible.sync="dialogVisible" width="40%"
      :before-close="handleClose">
      <div>
        <el-row>
          <div class="tit">
            <el-row>
              <el-col :span="12">
                <div style="font-size: 20px;">延迟通知列表</div>
              </el-col>
              <el-col :span="12" align="right">
                <el-button type="primary" icon="fa fa-plus" size="small" @click="handleAddGZ">
                  添加延迟通知时间
                </el-button>
              </el-col>
            </el-row>
          </div>
          <el-table ref="tableList" :data="dataForm.list" style="width: 100%;">
            <el-table-column align="center" label="操作" width="70">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-minus" circle @click="subGz(scope.$index)">

                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="通知时间范围" width="500px">
              <template slot-scope="scope">
                <el-time-picker v-model="scope.row.delayBeginDate" :picker-options="{
                  format: 'HH:mm:ss'
                }" value-format="HH:mm:ss" placeholder="开始时间">
                </el-time-picker>
                <span style="margin:0 4px;">至</span>
                <el-time-picker v-model="scope.row.delayEndDate" :picker-options="{
                  format: 'HH:mm:ss'
                }" value-format="HH:mm:ss" placeholder="结束时间">
                </el-time-picker>
              </template>
            </el-table-column>
            <el-table-column align="center" label="通知时间点" width="auto">
              <template slot-scope="scope">
                <el-time-picker v-model="scope.row.remindDate" :picker-options="{
                  format: 'HH:mm'
                }" value-format="HH:mm:00" placeholder="任意时间点">
                </el-time-picker>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="operatorType == 2" @click="commonData(0)">新增</el-button>
        <el-button type="primary" v-if="operatorType == 2" @click="commonData(1)">替换</el-button>
        <el-button type="primary" v-if="operatorType == 1" @click="confirmData">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import delayNoticeApi from '@/api/common/delayNotice.js';
export default {
  props: {
    ids: {
      type: Array,
      default: []
    },
    show: {
      type: Boolean,
      default: false
    },
    delayType: {
      type: Number,
      default: 1   //1 商户分类 2货品库
    },
    operatorType: {
      type: Number,
      default: 1   //1 编辑 2新增替换
    }
  },
  data() {
    return {
      dataForm: {
        list: [],
        // relationIds:'',
        // relationId:''
      },
      dialogVisible: false
    }
  },
  watch: {
    show(newVal, oldVal) {
      this.dialogVisible = newVal
    },
    ids(newVal, oldVal) {
      if (newVal.length == 1) {
        if (this.operatorType == 1 && this.show) {
          this.getData()
        }
      }

    }

  },
  mounted() {

  },
  methods: {
    getData() {
      delayNoticeApi.getList({
        id: this.ids[0],
        type: this.delayType
      }).then(res => {
        if (res.status == 0) {
          this.dataForm.list = res.data.map(item => {
            return {
              delayEndDate: item.delayEndDate,
              delayBeginDate: item.delayBeginDate,
              remindDate: item.remindDate,
            }
          })
        }
      })
    },
    handleAddGZ() {
      let obj = {
        delayBeginDate: '',
        delayEndDate: '',
        remindDate: '',
      }
      this.dataForm.list.push(obj)
    },
    subGz(index) {
      this.dataForm.list.splice(index, 1)
    },
    handleClose() {
      this.dialogVisible = false
      this.$emit('delayNoticeClose', false)
      this.dataForm.list = []
    },
    verifySubmit(i) {
      if (i == 1) {
        if (this.dataForm.list.length == 0) {
          this.$message.error('请添加延迟通知时间')
          return false
        }
      }

      for (let i in this.dataForm.list) {
        if (!this.dataForm.list[i].delayBeginDate || !this.dataForm.list[i].delayEndDate) {
          this.$message.error('请将通知时间范围填写完整')
          return false
        }
        if (this.dataForm.list[i].remindDate && !this.validateNotifyTime(this.dataForm.list[i].delayBeginDate, this.dataForm.list[i].delayEndDate, this.dataForm.list[i].remindDate)) {
          this.$message.error('通知时间必须大于结束时间，小于开始时间')
          return false
        }
      }
      return true;

    },
    // 这里的如何判断当天是否跨天数 就是用结束时间判断是不是小于开始时间 如果是的话就表示跨天数了
    validateNotifyTime(startTime, endTime, notifyTime) {
      let startTimeMinutes = convertToMinutes(startTime);
      let endTimeMinutes = convertToMinutes(endTime);
      let notifyTimeMinutes = convertToMinutes(notifyTime);

      function convertToMinutes(timeStr) {
        const [hours, minutes, seconds] = timeStr.split(":").map(Number);
        return hours * 3600 + minutes * 60 + seconds;
      }
      
      if (endTimeMinutes < startTimeMinutes) {
        if (notifyTimeMinutes > endTimeMinutes && notifyTimeMinutes < startTimeMinutes) {
          return true;
        }
      } else {
        if (notifyTimeMinutes > endTimeMinutes && notifyTimeMinutes > startTimeMinutes) {
          return true;
        }
      }
      return false;
    },

    commonData(s) {
      if (!this.verifySubmit(1)) {

      } else {
        // 0 否 1 是
        let params = {
          relationType: this.delayType,
          relationIds: this.ids,
          cover: s,
          list: this.dataForm.list
        }

        delayNoticeApi.setDelayTime(params).then(res => {
          if (res.status == 0) {
            this.$message.success("操作成功")
            this.$emit('delayNoticeConfirm', true)
            this.dataForm.list = []
          } else {
            this.$message.error(res.msg)
          }
        })
      }

    },

    confirmData() {
      if (!this.verifySubmit()) {
        return false; // 或者其他处理逻辑
      } else {
        let params = {
          relationType: this.delayType,
          relationId: this.ids[0],
          list: this.dataForm.list
        }

        delayNoticeApi.setDelayTime(params).then(res => {
          if (res.status == 0) {
            this.$message.success("操作成功")
            this.dataForm.list = []
            this.$emit('delayNoticeConfirm', true)
          } else {
            this.$message.error(res.msg)
          }
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.tit {
  margin-bottom: 10px;
}
</style>